<template>
	<div class="gtco-section border-bottom">
		<div class="gtco-container">
			<div class="row" style="justify-content: center;">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>{{themeBoxInfo.title}}</h2>
					<p>{{themeBoxInfo.intro}}</p>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-4 col-md-4 col-sm-6" v-for="(item,index) in themeBoxInfo.list" v-bind:key="index">
					<a :href="item.redirectTo" class="fh5co-project-item image-popup">
						<figure>
							<div class="overlay"><i class="ti-plus"></i></div>
							<img :src="item.image" alt="Image" class="img-responsive">
						</figure>
						<div class="fh5co-text">
							<h2>{{item.title}}</h2>
							<p>{{item.intro}}</p>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 传入参数示例
	// themeBoxInfo: {
		// title: "这是模块标题",
		// intro: "这是模块介绍",
		// list: [
		// 	{
		// 	image: "",
		// 	title: "这是标题",
		// 	intro: "这是介绍这是介绍这是介绍这是介绍",
		// 	redirectTo: ""
		// 	},
		// 	{
		// 	image: "",
		// 	title: "这是标题",
		// 	intro: "这是介绍这是介绍这是介绍这是介绍这是介绍",
		// 	redirectTo: ""
		// 	},
		// 	{
		// 	image: "",
		// 	title: "这是标题",
		// 	intro: "这是介绍这是介绍这是介绍这是介绍这是介绍",
		// 	redirectTo: ""
		// 	}
		// ]
	// }
export default {
 name:'themeBox',
 props:{
     themeBoxInfo:{
         type:Object,
         default: ''
     }
 },
 data(){
 return {

 }
 },
 components: {},
 beforeCreate(){},
 created(){},
 beforeMount(){},
 mounted(){},
 beforeUpdate(){},
 updated(){},
 beforeDestroy(){},
 destroy(){},
}
</script>

<style scoped lang="less">
@import './../../public/less/login.less';
</style>
